<template>
  <div class="content" :style="contentStyle">
    <v-touch
      class="article"
      v-for="(articleItem,index) in item.articles"
      :key="index"
      :class="articleClass(articleItem)"
      :style="articleStyle(articleItem)"
      @tap="item.isFinish?null:markTouch(articleItem,index,$event)"
    >
<!--      <Point v-if="!operated"/>-->
    </v-touch>
  </div>
</template>
<script>
import { mixins } from "@/common/mixins/assignmentMixins.js"
import {mapActions} from "vuex";
// import Point from "../point.vue"
export default {
  data() {
    return {
      errCount: 0,
      operated: false
    }
  },
  mixins: [mixins],
  // components:{
  //   Point
  // },
  computed: {
    articleClass(articleItem) {
      return function (articleItem) {
        if (articleItem.isSuc) return "suc"
        if (articleItem.isLos) return "los hit"
        if (!this.item.isFinish) return "enlarge hit"
      }
    }
  },
  methods: {
    markTouch: function (articleItem, index, event) {
      this.operated = true
      if (this.item.assignmentName === articleItem.name) {
        this.sucMusic()
        this.setFireworkPlay(event)
        this.$set(articleItem, "isSuc", true)
        setTimeout(() => {
          this.$set(articleItem, "isSuc", false)
          this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
        }, 3000)
        this.addAnswer({
          id: this.item.id,
          type: true
        })
      }
      else {
        this.losMusic()
        if(this.isSeedEntery){
            setTimeout(()=>{this.$emit('nextAssignment')},600)
        } else {
              this.$emit("losShow")
          }
        this.updateOperated({questionIndex:this.questionIndex,param:this.index})
        this.errCount++
        this.$set(articleItem, "isLos", true)
        setTimeout(() => { this.$set(articleItem, "isLos", false) }, 1000)
        this.addAnswer({
          id: this.item.id,
          type: false
        })
      }
    },
    ...mapActions("mainStatus", ["setLoading"]),
  },
  watch: {
    errCount: function (count) {
      if (count >= 3) {
        for (let i = 0, len = this.item.articles.length; i < len; i++) {
          if (this.item.assignmentName === this.item.articles[i].name) {
            this.$set(this.item.articles[i], "isSuc", true)
            setTimeout(() => { this.$set(this.item.articles[i], "isSuc", false) }, 2000)
          }
        }
      }
    }
  }
}
</script>

<style scoped lang='stylus'>
@import '../../../common/stylus/content.styl'
  .hit
    filter grayscale(1)

</style>
